<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
        <link rel="stylesheet" href="../css/mui.css">
        <link rel="stylesheet" href="./css/demo-common.css">
        <link rel="stylesheet" href="./css/atom-one-light.css">
        <script src="./js/jquery-2.2.3.min.js"></script>
        <script src="./js/highlight.pack.js"></script>
        <script src="../js/dropdown.js"></script>
    </head>
    <body>
        <h3>Dropdown下拉菜单</h3>
        <h4>基本实例</h4>
        <section>
            <div class="example">
                <p>给按钮或链接添加<mark>data-init</mark>属性，以初始化下拉菜单。</p>
                <p>注意：务必使用<mark>.dropdown</mark>作为根节点。</p>
                <br>
                <div class="dropdown">
                    <span class="btn btn-primary btn-medium" data-init="dropdown">
                        Dropdown
                        <i class="fa fa-caret-down"></i>
                    </span>
                    <div class="dropdown-menu">
                        <a>菜单项1</a>
                        <a>菜单项2</a>
                        <a>菜单项3</a>
                    </div>
                </div>
            </div>
            <pre><code>    &lt;!-- html --&gt;
    &lt;div class="dropdown"&gt;
        &lt;span class="btn btn-primary btn-medium" data-init="dropdown"&gt;
            Dropdown
            &lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;
        &lt;/span&gt;
        &lt;div class="dropdown-menu"&gt;
            &lt;a&gt;菜单项1&lt;/a&gt;
            &lt;a&gt;菜单项2&lt;/a&gt;
            &lt;a&gt;菜单项3&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
            </code></pre>
        </section>

        <h4>上拉菜单</h4>
        <section>
            <div class="example">
                <div>
                    <div class="dropup">
                        <span class="btn btn-primary btn-medium" data-init="dropdown">
                            Dropup
                            <i class="fa fa-caret-up"></i>
                        </span>
                        <div class="dropdown-menu">
                            <a>菜单项1</a>
                            <a>菜单项2</a>
                            <a>菜单项3</a>
                        </div>
                    </div>
                </div>
                <br>
                <p>使用类名<mark>.dropup</mark>，创建上拉菜单。</p>
            </div>
            <pre><code>    &lt;!-- html --&gt;
    &lt;div class="dropup"&gt;
        &lt;span class="btn btn-primary btn-medium" data-init="dropdown"&gt;
            Dropup
            &lt;i class="fa fa-caret-up"&gt;&lt;/i&gt;
        &lt;/span&gt;
        &lt;div class="dropdown-menu"&gt;
            &lt;a&gt;菜单项1&lt;/a&gt;
            &lt;a&gt;菜单项2&lt;/a&gt;
            &lt;a&gt;菜单项3&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;</code></pre>
        </section>

        <h4>通过Javascript初始化</h4>
        <section>
            <div class="example">
                <p>你也可以不添加<mark>data-init</mark>属性，通过javascript初始化下拉菜单。</p>
                <br>
                <div class="dropdown">
                    <span class="btn-outline btn-primary btn-medium" id="trigger1">
                        Dropdown
                        <i class="fa fa-caret-down"></i>
                    </span>
                    <div class="dropdown-menu">
                        <a>
                            <i class="fa fa-bank"></i>
                            菜单项
                        </a>
                        <a class="disabled">
                            <i class="fa fa-envelope"></i>
                            Disabled
                        </a>
                        <div class="divider"></div>
                        <a>
                            <i class="fa fa-phone"></i>
                            分割的菜单项
                        </a>
                    </div>
                </div>
                &nbsp;&nbsp;

            </div>
            <pre><code>    &lt;div class="dropdown"&gt;
        &lt;span class="btn-outline btn-primary btn-medium" id="trigger1"&gt;
            Dropdown
            &lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;
        &lt;/span&gt;
        &lt;div class="dropdown-menu"&gt;
            &lt;a&gt;
                &lt;i class="fa fa-bank"&gt;&lt;/i&gt;菜单项
            &lt;/a&gt;
            &lt;a class="disabled"&gt;
                &lt;i class="fa fa-envelope"&gt;&lt;/i&gt;Disabled
            &lt;/a&gt;
            &lt;div class="divider"&gt;&lt;/div&gt;
            &lt;a&gt;
                &lt;i class="fa fa-phone"&gt;&lt;/i&gt;分割的菜单项
            &lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;</code></pre>
            <pre><code>    // javascript
    $('#trigger1').dropdown();</code></pre>
            <div class="example" style="border-top:1px solid #ccc">
                <p>通过鼠标悬停展开下拉菜单：</p>
                <br>
                <div class="dropdown">
                    <span class="btn-outline btn-primary btn-medium" id="trigger2">
                        Hover Me
                        <i class="fa fa-caret-down"></i>
                    </span>
                    <div class="dropdown-menu">
                        <a>一</a>
                        <a>二</a>
                        <a>三</a>
                    </div>
                </div>
            </div>
            <pre><code>    
    $('#trigger1').dropdown({ hover: true }); 
    </code></pre>
        </section>

        <h4>Javascript方法</h4>
        <section>
            <div class="example">
                <p>通过javascript展开或关闭菜单：</p>
            </div>
            <pre><code>    
    $('#trigger1').dropdown('open'); 
    $('#trigger1').dropdown('close');
    </code></pre>
        </section>

        <script>
          $(document).ready(function() {
            $('pre code').each(function(i, block) {
              hljs.highlightBlock(block);
            });
          });
        $('#trigger1').dropdown();
        $('#trigger2').dropdown({hover:true});
        </script>
    </body>
</html>